<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>createclass</title>
    <link rel="stylesheet" href="/static/lib/css/layui.css" media="all">
</head>

<body>

    <blockquote class="layui-elem-quote layui-text">
        注意: 只能为自己创建班级 相同名称的班级需用学期区分
    </blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>创建班级</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" action="" lay-filter="newclass">
        <div class="layui-form-item">
            <label class="layui-form-label">班级名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="classname" autocomplete="off" placeholder="如：高等数学 大学英语 线性代数等"
                    class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">教师</label>
            <div class="layui-input-block">
                <input type="text" name="teacher" lay-verify="" autocomplete="off" placeholder="" class="layui-input"
                    value="{{username}}" readonly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">班级后缀</label>
            <div class="layui-input-block">
                <input type="text" name="other" lay-verify="other" autocomplete="off" placeholder="如：大一上 2班 1班等"
                    class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <!-- <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button> -->
                <!-- <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button> -->
                <button type="button" class="layui-btn" lay-submit="" lay-filter="form1">立即创建</button>
            </div>
        </div>
    </form>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>管理学生</legend>
    </fieldset>

    <!-- <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script> -->

    <form class="layui-form layui-form-pane" action="" lay-filter="">

        <div class="layui-form-item">
            <label class="layui-form-label">选择班级</label>
            <div class="layui-input-inline">
                <select name="classname" lay-verify="required" lay-search="">
                    <option value="">若不存在班级请先创建</option>
                    {% for class in classes %}
                    <option value="{{ class.classname }}">{{ class.classname }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择学生</label>
            <div class="layui-btn-group demoTable">
                <button type="button" class="layui-btn" data-type="" lay-submit="" lay-filter="form2">添加到班级</button>
                <!-- <button class="layui-btn" type="button" data-type="getCheckLength">获取选中数目</button> -->
            </div>
            
            <table class="layui-table" lay-data="{width: 892, height:'ful-330', url:'../api/students', id:'students' , toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print' ]}"
                lay-filter="">
                <thead>
                    <tr>
                        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                        <th lay-data="{field:'id', width:100, sort: true, fixed: true}">ID</th>
                        <th lay-data="{field:'num', width:150}">学号</th>
                        <th lay-data="{field:'name', width:150}">姓名</th>
                    </tr>
                </thead>
            </table>
        </div>

        
    </form>

    <script src="/static/lib/layui.js" charset="utf-8"></script>
    <script src="/static/lib/axios.min.js"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , $ = layui.$
                , table = layui.table;
            //监听表格复选框选择
            /* table.on('checkbox()', function (obj) {
                console.log(obj)
            }); */

            //监听工具条
            /* table.on('tool()', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.alert('编辑行：<br>' + JSON.stringify(data))
                }
            }); */

            /* var active = {
                getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('students')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    
                }
                , getCheckLength: function () { //获取选中数目
                    var checkStatus = table.checkStatus('students')
                        , data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            }); */

            //创建一个编辑器
            // var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                classname: [
                    /^[\S]{2,12}$/
                    , '班级名称必须2到12位，且不能出现空格'
                ]
                , other: [
                    /^[\S]{1,12}$/
                    , '后缀必须1到12位，且不能出现空格'
                ]
                , selectclass: [

                ]
                /* , content: function (value) {
                    layedit.sync(editIndex);
                } */
            });

            //监听创建班级表单的提交
            form.on('submit(form1)', function (data) {
                /* layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                }) */
                data = data.field
                var formData = new FormData();
                formData.append('name', data.name);
                formData.append('teacher', data.teacher);
                formData.append('other', data.other);
                console.log(formData);
                axios({
                    method: 'post',
                    url: '../api/classes',
                    data: formData,
                })
                    .then(function (response) {
                        console.log(response.data);
                        result = response.data.result
                        if (result == "dulicate-classname") {
                            layer.msg("该班级名称已存在 请尝试不同后缀")
                        } else if (result == "create-class-success") {
                            layer.msg("班级创建成功")
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                return false;
            });

            //监听管理学生表单的提交
            form.on('submit(form2)', function (data) {
                var checkStatus = table.checkStatus('students')
                    , tdata = checkStatus.data;
                // layer.alert(JSON.stringify(data));
                let idlist = []
                for (let s of tdata){
                    //console.log(s.id)
                    idlist.push(s.id)
                }
                data = data.field
                console.log(idlist.join('-'))
                axios({
                    method: 'put',
                    url: '../api/classes',
                    data: "classname="+data.classname+"&studentids="+idlist.join('-'),
                })
                    .then(function (response) {
                        console.log(response.data);
                        result = response.data.result
                        if (result == "no-exist-student") {
                            sid = response.data.id
                            layer.msg("该学生id不存在: " + sid)
                        } else if (result == "nothing-change"){
                            layer.msg("未添加任何学生")
                        } else {
                            layer.msg("成功")
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                return false;
            });

            //表单取值
            /* layui.$('#LAY-component-form-getval').on('click', function () {
                var data = form.val('newclass');
                alert(JSON.stringify(data));
            }); */

        });
    </script>

</body>

</html>